<template>
    <div style="background:#fff;">
        <div class="nav-banner">
            <div class="nav-box">
                <div class="home-banner">
                    <div class="home-top-layout">                        
                        <div class="main">
                            <!-- <div class="gsname">简单竟戈网络科技有限公司</div> -->
                            <!-- logo begin-->
                            <a class="a-logo" title="简单玩" href="#"></a>
                            <!-- logo end-->

                            <!-- menu begin -->
                            <ul class="a-menu">
                                <router-link tag="li" :to="{path:'/'}" class="active"><a>首页</a></router-link>
                                <!-- <div class="router-div">
                                    <router-link tag="li" :to="{path:'/disputeHandling'}"><a title="纠纷处理">纠纷处理</a></router-link>
                                </div>
                                <div class="router-div">
                                    <router-link tag="li" :to="{path:'/tutelage'}"><a title="家长监护">家长监护</a></router-link>
                                </div>                                
                                <div class="router-div">
                                    <router-link tag="li" :to="{path:'/about'}"><a title="关于我们">关于我们</a></router-link>
                                </div> -->
                                <div class="router-div" @click="headTit(1)">
                                    <router-link tag="li" :to="{path:'/playAroundWith',query:{type:1}}"><a title="约陪玩">约陪玩</a></router-link>
                                </div>
                                <div class="router-div" @click="headTit(2)">
                                    <li><a class="download" title="充值">充值</a></li>
                                </div>
                                <router-link tag="li" :to="{path:'/download'}"><a title="APP下载">APP下载</a></router-link>
                                <div class="router-div" @click="headTit(4)">
                                    <li><a class="download" title="申请入驻">申请入驻</a></li>
                                </div>
                            </ul>
                            <!-- menu end -->

                            <!-- search begin -->
                            <div class="search-layout">
                                <input class="search-input" type="text" v-model="searchVal" placeholder="搜索昵称/UID/靓号" @keyup.enter="search()">
                            </div>
                            <!-- search end -->

                            <!-- feature-group  begin -->
                            <ul class="feature-group">
                                <li><a class="message-iconD" @click="messageLink()">消息</a></li>
                                <li><a class="a-user-iconD" v-if="detailNull == false" @click="islogin = true">登录/注册</a></li>
                                <li v-if="detailNull">
                                    <div class="a-user-icon-ed">
                                        <img :src="$imgPath(detailObj.headImg)">
                                        <i></i>

                                        <!-- userInfo begin -->
                                        <div class="userInfo">
                                            <div class="userInfo-msg">
                                                <div class="userInfo-img">
                                                    <img :src="$imgPath(detailObj.headImg)">
                                                    <span class="loginOut" @click="loginOut()">退出</span>
                                                </div>
                                                <div class="userInfo-name">
                                                    <span>{{detailObj.nickname}}</span>
                                                    <i class="she" v-if="detailObj.sex == 2">{{detailObj.age}}</i>
                                                    <i class="nan" v-else-if="detailObj.sex == 1">{{detailObj.age}}</i>
                                                    <label>
                                                        UID:{{detailObj.code}}
                                                        <!-- <i></i> -->
                                                    </label>
                                                </div>
                                                <div class="userInfo-VIP">
                                                    <!-- <label class="VIP">VIP2</label>
                                                    <label class="LV">LV12</label> -->
                                                    <label class="approve">{{detailObj.validIdentity ? '已认证' : '未认证'}}</label>
                                                    <label class="bound">{{detailObj.phone ? '已绑定' : '未绑定'}}</label>
                                                </div>
                                                <!-- <div class="userInfo-EXP">
                                                    <div class="userInfo-EXP-layout">
                                                        <div class="userInfo-EXP-now">
                                                            VIP2
                                                        </div>

                                                        <div class="userInfo-EXP-plan">
                                                            <div class="userInfo-EXP-plan-num" style=" width: 45%;"></div>
                                                            <div class="userInfo-EXP-plan-node" style=" left: 40%;"></div>
                                                            <div class="userInfo-EXP-plan-value">
                                                                450/1000
                                                            </div>
                                                        </div>

                                                        <div class="userInfo-EXP-future">
                                                            VIP3
                                                        </div>
                                                    </div>

                                                    <div class="userInfo-EXP-layout">
                                                        <div class="userInfo-EXP-now">
                                                            LV2
                                                        </div>

                                                        <div class="userInfo-EXP-plan">
                                                            <div class="userInfo-EXP-plan-num" style=" width: 45%;"></div>
                                                            <div class="userInfo-EXP-plan-node" style=" left: 40%;"></div>
                                                            <div class="userInfo-EXP-plan-value">
                                                                450/1000
                                                            </div>
                                                        </div>

                                                        <div class="userInfo-EXP-future">
                                                            LV3
                                                        </div>
                                                    </div>
                                                </div> -->
                                            </div>

                                            <div class="Wallet-layout">
                                                <div class="Wallet">
                                                    <div class="Wallet-title">
                                                        我的钱包
                                                    </div>
                                                    <div class="Wallet-msg">
                                                        <label class="balance">余额：￥{{moneyObj.recharge}}元</label>
                                                        <label class="diamond">钻石：{{moneyObj.credits}}</label>
                                                        <label class="recharge">
                                                            <router-link tag="a" :to="{path:'/topUp',query:{type:2,tabIndex:0}}">充值</router-link>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="user-operation">
                                                <ul>
                                                    <li class="personal-center">
                                                        <a>
                                                            <router-link tag="label" :to="{name:'center',query:{leftIndex:2}}">个人中心</router-link>
                                                        </a>
                                                    </li>
                                                    <li class="order-management">
                                                        <a>
                                                            <router-link tag="label" :to="{name:'center',query:{leftIndex:0}}">订单管理</router-link>
                                                        </a>
                                                    </li>
                                                    <li class="setfamily">
                                                        <a>
                                                            <router-link tag="label" :to="{name:'center',query:{leftIndex:7}}">设置资料</router-link>
                                                        </a>
                                                    </li>
                                                    <li class="pupil-sitter">
                                                        <a>
                                                            <router-link tag="label" :to="{name:'applyForService',query:{type:4}}">申请陪玩师</router-link>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <!-- userInfo end -->

                                    </div>
                                </li>
                            </ul>
                            <!-- feature-group  end -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--home top  begin-->
        <div class="banner-swiper">
            <div class="banner-1920">
                <Carousel v-model="value1" loop autoplay :autoplay-speed="6000">
                    <CarouselItem v-for="(item,index) in bannerList" :key="index">
                        <div class="demo-carousel">
                            <img class="banner-img" :src="$imgPath(item.image)" alt="">
                        </div>
                    </CarouselItem>
                </Carousel>
            </div>
        </div>
        <!-- 适龄提示语 -->
        <!-- <div class="ageHnit">
            <h3>温馨提示</h3>
            <ul>
                <li>抵制不良游戏 | 拒绝盗版游戏</li>
                <li>注意自我保护 | 谨防上当受骗</li>
                <li>适度游戏益闹 | 沉迷游戏伤身</li>
                <li>合理安排时间 | 享受健康生活</li>
                <li>本网站所有游戏适合18周岁以上用户</li>
                <li>未成年用户请在家长监督下进行游戏</li>
            </ul>
        </div> -->
        <!-- Sidebar begin -->
        <div class="Sidebar" id="searchBar">
            <ul>
                <li>
                    <a class="active Sidebar-1">
                        <label>在线客服</label>
                    </a>
                </li>
                <li>
                    <a class="Sidebar-2">
                        <label>在线客服</label>
                    </a>
                </li>
                <li>
                    <a class="Sidebar-3">
                        <img src="../assets/img/footer/AppQR.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a class="Sidebar-4">
                        <label>投诉</label>
                    </a>
                </li>
                <li @click="huiTop()">
                    <!-- <BackTop></BackTop> -->
                    <a class="Sidebar-5">
                        <label>返回顶部</label>
                    </a>
                </li>
            </ul>
        </div>
        <div class="home-layout">
            <div class="main">
                <indexHotServie :isLog="isLog" @goLogin="goLogin($event)"></indexHotServie>
                <indexForYou></indexForYou>
            </div>
            <indexSwiper></indexSwiper>
            <indexServiceList></indexServiceList>
        </div>
        <login :login="islogin" @colseValue="colseValueLogin" :wxCode="wxCode"></login>
        <!-- Sidebar end -->   
        <yw-footer></yw-footer>
       
    </div>
</template>
<script>
import apiHttp from '../api/index.js'
import login from '@/components/login'
import footer from './common/footer'
import indexHotServie from './indexChild/indexHotService'
import indexForYou from './indexChild/indexForYou'
import indexSwiper from './indexChild/indexSwiper'
import indexServiceList from './indexChild/indexServiceList'
export default {
    data(){
        return{
            islogin:false,
            value1:0,           // banner默认显示页
            bannerList:[],      // banner列表
            detailObj:{},       // 个人信息
            moneyObj:{},        // 钱包明细
            detailNull:false,   // 判断个人信息是否为空
            searchVal:'',
            isLog:false,        // 检测是否登录
            wxCode:this.$route.query.code ? this.$route.query.code : '',          // 微信code
        }
    },
    components:{
        'yw-footer':footer,
        indexHotServie,
        indexForYou,
        indexSwiper,
        indexServiceList,
        login
       
    },
    mounted(){
        this.banner()
        this.verify()
        window.addEventListener('scroll', this.handleScroll)
    },
    watch:{
        '$store.state.token':{
            handler(newVal,oldVal){
                this.verify()
            },
            immediate:true
        }
    },
    methods:{
        handleScroll () { //改变元素#searchBar的top值
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            let id = document.getElementById('searchBar')
            if(scrollTop > 600){
                id.style.opacity = '1'
            }else{
                id.style.opacity = '0'
            }
        },
        goLogin(val){
            this.islogin=val;
        },
        headTit(type){
            if(type == 2 || type == 4){
                if(!this.isLog){
                    this.$Message.error('请您先登录')
                    this.islogin = !this.islogin
                }else{
                    if(type == 2){
                        let routeData = this.$router.resolve({
                            name:'topUp',
                            query:{
                                type: 2,
                                tabIndex:0
                            }
                        })
                        window.open(routeData.href, '_blank')
                    }else if(type == 4){
                        let routeData = this.$router.resolve({
                            name:'applyForService',
                            query:{
                                type: 4
                            }
                        })
                        window.open(routeData.href, '_blank')
                    }
                }
            }
        },
        // 关闭登陆窗口
        colseValueLogin(value){
            this.islogin  = value
        },
        
        // banner
        banner(){
            apiHttp.apiIndex.indexBannerList('',resp=>{
                if(resp.code == 200){
                    this.bannerList = resp.data
                }
            })
        },
        // 判断token是否有效
        verify(){
            apiHttp.apiLogin.verify('',resp=>{
                if(resp.code == 200){
                    if(resp.data == 1){
                        this.screening()
                        this.getUserWalletDetail()
                        this.isLog = true
                    }else{
                        localStorage.removeItem('token')
                    }
                }
            })
        },
        // 获取个人资料
        screening(){
            apiHttp.apiCenter.detail('',resp => {
                this.detailObj = resp
                this.detailNull = true
            })
        },
        // 钱包详情
        getUserWalletDetail(){
            apiHttp.apiCenter.getUserWalletDetail('',resp=>{
                if(resp.code == 200){
                    this.moneyObj = resp.data
                }
            })
        },
        // 退出登陆
        loginOut(){
            apiHttp.apiCenter.logout('',resp=>{
                if(resp.code == 200){
                    localStorage.removeItem('token')
                    this.detailObj = {}
                    this.detailNull = false 
                    this.verify()               
                    this.$Message.success('退出登陆成功')
                    this.isLog = false
                }
            })
        },
        // 搜索
        search(){
            if(this.searchVal != ''){
                let routeData = this.$router.resolve({
                    path: '/search',
                    query:{
                        name:this.searchVal
                    }
                })
                window.open(routeData.href, '_blank')
            }
        },
        // 消息跳转
        messageLink(){
            if(this.isLog){
                let routeData = this.$router.resolve({
                    name:'center',
                    query:{
                        leftIndex:'6'
                    }
                })
                window.open(routeData.href, '_blank')
            }else{
                this.islogin = true
                this.$Message.error('请您先登录')
            }
        },
        // 返回顶部
        huiTop(){
            document.documentElement.scrollTop = 0
        }
    },
    destroyed () {//离开该页面需要移除这个监听的事件
        window.removeEventListener('scroll', this.handleScroll)
    },
}
</script>
<style scoped>
input::-webkit-input-placeholder {
    font-size: 14px;
}
.router-div{
    display: inline-block;
    float: left;
}
.feature-group li a{
    height: 76px;
    line-height: 76px;
}
.Wallet-msg .recharge a{
    height: 30px;
    line-height: 30px;
}
.message-icon{
    height: 76px !important;
    line-height: 76px !important;
}
.feature-group li a{
    color: #fff;
}
.a-menu li a{
    color: #fff;
}
.a-menu li.active a{
    color: #d84e4d;
}
.banner-1920{
    position: absolute;
    left: -360px;
    top:0;
    width: 1920px;
    height: 560px;
}
/* 温馨提示的样式和位置 */
.ageHnit{
    background-color: #CD4D4B;
    color: #fff;
    position: absolute;
    right: 10px;
    top: 100px;
    padding: 10px;
    border-radius: 10px;
}
.ageHnit ul li{
    list-style: none;
    margin: 5px 0px;
}
.ageHnit h3{
    text-align: center;
    margin-bottom: 10px;
}
</style>


